<template>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="$route.path"
            :collapse="collapse"
            background-color="rgb(70, 103, 216)"
            text-color="#fff"
            active-text-color="rgb(115, 249, 204)"
            unique-opened
            router
        >
            <template v-for="(item,index) in items" >
                <template v-if=" typeof item.children != 'undefined'">
                    <el-submenu
                        :index=" typeof item.url == 'undefined'  ?(index+1+''):subItem.url"
                        :key="index"
                    >
                        <template slot="title">
                            <i :class="item.icoStyle"></i>
                            <span slot="title">{{ item.name }}</span>
                        </template>
                        <template v-for="(subItem,sub_index) in item.children">
                            <el-submenu
                                v-if="  typeof subItem.children != 'undefined'"
                                :index="typeof(subItem.url) == 'undefined'  ?(index+1+'')+'-'+(sub_index+1+''):subItem.url"
                                :key="(index+1+'')+'-'+(sub_index+1+'')"
                            >
                                <template slot="title">{{ subItem.name }}</template>
                                <el-menu-item
                                    v-for="(threeItem,thr_index) in subItem.children"
                                    :key="thr_index"
                                    :index="typeof(threeItem.url) == 'undefined' ?(index+1+'')+'-'+(sub_index+1+'')+'-'+(thr_index+1+''):threeItem.url"
                                >{{ threeItem.name }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index="subItem.url"
                                :key="sub_index"
                            >{{ subItem.name }}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.url " :key="index">
                        <i :class="item.icoStyle"></i>
                        <span slot="title">{{ item.name }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
import _ from 'lodash';
export default {
    data() {
        return {
            collapse: false,
            isUpdate:false,
            isUpdate1:false,
            items: [],
            router_act: ''
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        //递归获取树有url为止
        getTreeUrl(treeData) {
            if (treeData.length < 1) {
                return;
            }
            console.log('getTreeUrl treeData', treeData);
            if (typeof treeData[0].url == 'undefined') {
                this.getTreeUrl(treeData[0].children);
            } else {
                this.$router.push(treeData[0].url);
                console.log('getTreeUrl', treeData[0].url);
            }
        }
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    components: {},
    created() {
        this.items = this.$store.state.menuData.menu;
          console.log('menu menuData ', this.$store.state.menuData.menu);
        
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
        bus.$on('menu', data => {
            this.collapse = true;
            bus.$emit('collapse-content',  this.collapse);

            console.log('menu on ', data);
            this.items =_.cloneDeep(data); 
            //bus.$emit('collapse-content', false);
            
            this.$nextTick(()=>{
                 this.collapse = false;
            bus.$emit('collapse-content',  this.collapse);
            })
        });
    },
    mounted() {
         
    },
    watch: {
      
    }
};
</script>

<style >
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul {
    height: 100%;
}

.el-menu-item:hover {
    background-color: rgb(59, 85, 180) !important;
}

.el-submenu__title:hover {
    background-color: rgb(59, 85, 180) !important;
}
.iconfont {
    margin-right: 16px;
    color: #f7f4f4 !important;
}
.el-submenu__title i {
    color: #f7f4f4 !important;
}
</style>
